<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            background: #fff;
            padding: 20px;
            margin: 20px auto;
            width: 82%;
            border: 1px solid #e8f3ec;
            border-bottom: 9px solid #E7EFF1;

        }

        td {
            display: inline-flex;
            width: 198px;
            height: 38px;
            line-height: 38px;
            border-collapse: collapse;
            border: 1px solid #dddddd;
        }
        .tb tr:nth-child(odd){
            background: antiquewhite;
        }

      .div2 div {
            width: 95%;
        }

          .div21 {
            display: block;
        }

        .div22 {
            display: none;
        }

        .div23 {
            display: none;
        }

        .div24 {
            display: none;
        }
        .input3,.se3,.btn3{
            display: inline-block;
            height: 30px;
        }
        .hide{

        }
        .show{

        }
    </style>
</head>
<body>
<div>
    <div class="div1">
        1、表格隔行变色和移入变色<br>
        <button>开启隔行变色</button>
        <button>开启移入变色</button>
        <br>
        <table class="tab">
            <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            </thead>
            <tbody class="">
            <tr>
                <td>1</td>
                <td>尹一</td>
                <td>11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>尔二</td>
                <td>22</td>
            </tr>
            <tr>
                <td>3</td>
                <td>山三</td>
                <td>33</td>
            </tr>
            <tr>
                <td>4</td>
                <td>司四</td>
                <td>44</td>
            </tr>
            <tr>
                <td>5</td>
                <td>吴五</td>
                <td>55</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="div2">
        <button class="b21">栏目一</button>
        <button class="b2">栏目二</button>
        <button class="b2">栏目三</button>
        <button class="b2">栏目四</button>
        <div class="div21">
            栏目一的内容<br>
            栏目一的内容<br>
            栏目一的内容<br>
            栏目一的内容<br>
        </div>
        <div class="div22">
            栏目二的内容<br>
            栏目二的内容<br>
            栏目二的内容<br>
            栏目二的内容<br>
        </div>
        <div class="div23">
            栏目三的内容<br>
            栏目三的内容<br>
            栏目三的内容<br>
            栏目三的内容<br>
        </div>
        <div class="div24">
            栏目四的内容<br>
            栏目四的内容<br>
            栏目四的内容<br>
            栏目四的内容<br>
        </div>
    </div>
    <div class="div3">
        4、switch问候<br>
        <input class="input3" type="text" placeholder="姓名">
        <select class="se3">
            <option value="0">性别</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        <button class="btn3">问候</button>
    </div>
</div>
<script>
    var div1=document.getElementsByClassName("div1")[0];
    var btn1=div1.getElementsByTagName("button");
    var tb=div1.getElementsByTagName("tbody")[0];
    var tr=tb.getElementsByTagName("tr");
    var cgcolor=0;
    btn1[0].onclick=function (ev) {
       if (cgcolor==0) {
           tb.className="tb";
           ev.target.innerText="关闭隔行变色";
           cgcolor=1;
       }
       else {
           tb.className="";
           ev.innerText="开启隔行变色";
           cgcolor=0;
       }
    }

</script>
</body>
</html>